<template>
  <div
    id="SideNavMain"
    :class="route.fullPath === '/' ? 'lg:w-[220px]' : 'lg:w-[220px]'"
    class="fixed z-20 bg-white pt-[70px] h-full lg:border-r-0 border-r w-[75px] overflow-auto">
    <div class="lg:w-full w-[55px] mx-auto">
      <NuxtLink to="/">
        <MenuItem iconString="最新发布" colorString="#F02C56" sizeString="30" />
      </NuxtLink>
      <MenuItem iconString="旅游攻略" colorString="#000000" sizeString="27" />
      <MenuItem iconString="美食攻略" colorString="#000000" sizeString="27" />
    
      <div class="border-b lg:ml-2 mt-2"></div>

      <div class="lg:bolck hidden text-xs text-gray-600 font-semibold pt-4 pb-2 px-2">
        Suggested accounts
      </div>
      <div class="lg:hidden block pt-3"></div>

      <div class="cousor-pointer">
        <MenuItemFollow />
      </div>
      <button class="lg:block hidden text-[#F02C56] pt-1.5 pl-2 text-[13px]">
        See all
      </button>
      <div class="border-b lg:ml-2 mt-2"></div>

      <div class="lg:bolck hidden text-xs text-gray-600 font-semibold pt-4 pb-2 px-2">
        Following accounts
      </div>
      <div class="lg:hidden block pt-3"></div>

      <div class="cousor-pointer">
        <MenuItemFollow />
      </div>
      <button class="lg:block hidden text-[#F02C56] pt-1.5 pl-2 text-[13px]">
        See more
      </button>
      <div class="lg:block hidden border-b lg:ml-2 mt-2"></div>

      <!-- <div class="lg:block hidden text-[11px] text-gray-500">
        <div class="pt-4 px-2">About Newsroom TikTok Shop Contact Careers ByteDance</div>
        <div class="pt-4 px-2">TikTok for Good Advertise Developers Transparency TikTok Tewards TikTok Browse TikTok</div>
        <div class="pt-4 px-2">Help Safety Termms Peivacy Creator Portal Community Guidelines</div>
        <div class="pt-4 px-2">@2023 TikTok</div>
        <div class="pt-4 px-2"></div>
      </div>
      <div class="pb-14"></div> -->
    </div>
  </div>
</template>
<script setup>
const route = useRoute()
</script>
<style scoped>

</style>